import { OsIcon } from './icons/icon'
import OsButton from './OsButton'
import OsDialog from './OsDialog'
import OsDraggable from './OsDraggable'
import OsTableDropdown from './OsTableDropdown'
import OsTable from './OsTable'
import OsInputTable from './OsInputTable'
import OsFormTable from './OsFormTable'
import OsGrid from './OsGrid'
import OsCaptcha from './OsCaptcha'
import OsTitle from './OsTitle'
import formCreate from '@form-create/element-ui'
import OsHome from './OsHome'
import OsLogin from './OsLogin'
import OsSelect from './OsSelect'

// 引入 vxe-table 插件
import XEUtils from 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
import VXETablePluginElement from 'vxe-table-plugin-element'
import 'vxe-table-plugin-element/dist/style.css'

/**
 * 自定义组件
 * 定义 Cmponent.vue
 * 其次在同一目录下建立index.js文件,在这个文件中使用install方法来全局注册该组件
 * import component from './Cmponent.vue'
  const component = {
    install:function(Vue){
      Vue.component('component-name',component)
    } //'component-name'这就是后面可以使用的组件的名字，install是默认的一个方法

  }
  // 导出该组件
  export default component
  // 只要在index.js里规定了install方法，就可以向其他ui组件库那样，使用Vue.use()来全局使用
    import loading from './index.js'
    Vue.use(loading)
 */
export default {
  install (Vue, components = {}, vxe) {
    Vue.use(formCreate)
    Vue.component('os-title', components.title || OsTitle)
    Vue.component('os-home', components.home || OsHome)
    Vue.component('os-login', components.login || OsLogin)
    components.nav && Vue.component('os-nav', components.nav)
    // 使用install方法来全局注册组件
    Vue.component(OsIcon.name, OsIcon)
    Vue.component(OsButton.name, OsButton)
    Vue.component(OsDialog.name, OsDialog)
    Vue.component(OsDraggable.name, OsDraggable)
    Vue.component(OsTableDropdown.name, OsTableDropdown)
    Vue.component(OsTable.name, OsTable)
    Vue.component(OsInputTable.name, OsInputTable)
    Vue.component(OsFormTable.name, OsFormTable)
    Vue.component(OsCaptcha.name, OsCaptcha)
    Vue.component(OsSelect.name, OsSelect)
    // VXETable
    Vue.use(VXETable, XEUtils)
    VXETable.use(VXETablePluginElement)
    Vue.component(OsGrid.name, OsGrid)
    vxe && VXETable.renderer.mixin(vxe.renderer)
    // VXETable.renderer.add('EditInputTable', {
    //   // autofocus: '.el-input__inner',
    //   renderEdit (h, renderOpts, params) {
    //     const { row, column } = params
    //     const { props } = renderOpts
    //     if (typeof props.data === 'function') {
    //       props.data = props.data({ row })
    //     }
    //     return [
    //       <QxInputTable
    //         {...{
    //           props: props
    //         }}
    //         vModel={row[column.property]}
    //         vxe={{ renderOpts, params }}
    //       />
    //     ]
    //   }
    // })
    // VXETable.renderer.add('Action', {
    //   renderDefault (h, { props }, params) {
    //     return [
    //       props.map(btn => <el-button
    //         disabled={btn.disabled}
    //         type={btn.type || 'primary'}
    //         loading={btn.loading}
    //         size={btn.size || 'mini'}
    //         plain={btn.plain || true}
    //         vOn:click={() => btn.cb(params)}>{btn.text}</el-button>)
    //     ]
    //   }
    // })
  }
}
